<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>vip管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div style="display: flex; align-items: center">
                  <el-button type="primary" @click="roomDialog = true"
                  >添加vip</el-button
                  >
                </div>
              </template>
                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="vip名称" />
                    <el-table-column prop="level" label="vip等级" />
                    <el-table-column prop="turnover" label="升级所需流水" />
                    <el-table-column prop="money" label="升级所需上分" />
                    <el-table-column prop="balance_income" label="余额宝收益利率" >
                    <template #default="scope">
                      <span>{{scope.row.balance_income}}%</span>
                    </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="添加时间" />

                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                          <el-button type="success"
                                     @click="adminVipUpdate(scope.row)">修改</el-button>

<!--                          <el-popconfirm-->
<!--                              title="确定删除该vip吗?"-->
<!--                              @confirm="adminVipDelete(scope.row.id)"-->
<!--                          >-->
<!--                            <template #reference>-->
<!--                              <el-button type="danger" :icon="Delete">删除 </el-button>-->
<!--                            </template>-->
<!--                          </el-popconfirm>-->
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>
  <!-- 添加管理员 -->
  <el-dialog
      v-model="roomDialog"
      title="添加vip"
      center
      width="38%"
      @close="roomhandleClose"
  >
    <el-form label-width="120px">
      <el-form-item label="名称">
        <el-input
            type="text"
            v-model="formData.name"
            placeholder="列如：VIP1"
        />
      </el-form-item>
      <el-form-item label="需要升级流水">
        <el-input
            type="text"
            v-model="formData.turnover"
            placeholder="列如：1000"
        />
      </el-form-item>
      <el-form-item label="需要上分">
        <el-input
            type="text"
            v-model="formData.money"
            placeholder="列如：1000"
        />
      </el-form-item>
      <el-form-item label="余额宝收益率">
        <el-input
            type="number"
            v-model="formData.balance_income"
            placeholder="余额宝收益率 ：列如 0.05"
        />
      </el-form-item>
      <el-form-item label="vip等级">
        <el-select  v-model="formData.level">
          <el-option value="0">0</el-option>
          <el-option value="1">1</el-option>
          <el-option value="2">2</el-option>
          <el-option value="3">3</el-option>
          <el-option value="4">4</el-option>
          <el-option value="5">5</el-option>
          <el-option value="6">6</el-option>
          <el-option value="7">7</el-option>
          <el-option value="8">8</el-option>
          <el-option value="9">9</el-option>
          <el-option value="10">10</el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="vip描述">
        <el-input
            :autosize="{ minRows: 5, maxRows: 20 }" type="textarea"
            v-model="formData.desc"
            placeholder="vip描述"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" @click="roomDialog = false">取消保存</el-button>
      <el-button type="primary" @click="adminVipCreate">保存提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

const router = useRouter();
const roomDialog = ref(false);
const tableData = reactive({ list: [] });
const formData = reactive({
  id:null,
  name: "",
  turnover: "",
  money: "",
  level:0,
  balance_income: "",
  desc: "",
});

onMounted(() => {
    getList()
})

// 获取列表
function getList() {
    request_post('/admin_vip_list', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            formData.money = res.data.data.data[0].money
            formData.turnover = res.data.data.data[0].turnover
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })
}

// 添加配置
function adminVipCreate() {
  request_post("admin_vip_create", formData).then((res) => {
    if (res.data.code == 200) {
      roomDialog.value = false;
      getList();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 修改房间状态
function adminVipUpdate(item) {
  formData.id = item.id;
  formData.name = item.name;
  formData.turnover = item.turnover;
  formData.money = item.money;
  formData.balance_income = item.balance_income;
  formData.desc = item.desc;
  formData.level = item.level;
  console.log(formData,'formData');

  roomDialog.value = true;
}


//删除
function adminVipDelete(id){
  request_post("admin_vip_delete", { id: id }).then((res) => {
    if (res.data.code == 200) {
      getList();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}
const page = reactive({
    uid: null,
    pagenum: 1,
    pagesize: 18,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
  getList()
}
function handleCurrentChange(val) {
    page.pagenum = val
  getList()
}
function roomhandleClose() {
  formData.id = null;
  formData.money = tableData.list[0].money
  formData.turnover = tableData.list[0].turnover

  formData.balance_income = "";
  formData.desc = "";
  formData.level = 0;
}

</script>

<style></style>
